<template>
  <el-dialog class="el-dialog-file"  title="图片中心" :is_multiple="is_multiple" :visible.sync="Innervisible" @close="Innervisible = false" append-to-body>
    <el-row style="margin-bottom: 1.125rem;">
      <el-upload
        class="upload-demo"
        :action=" base_url + 'upload/image'"
        multiple
        name="image"
        :on-success="uploadSuccess"
        :limit="max_upload_limit"
        :on-exceed="handleExceed"
        :show-file-list=false
        >
        <el-button type="plain" size="small"><i class="el-icon-upload el-icon--left"></i>点击上传</el-button>
      </el-upload>
      <el-button type="plain" size="small" @click="addFoler"><i class="el-icon-folder-add el-icon--left" />新增文件夹</el-button>
      <el-popover placement="bottom"  width="160" v-model="popover_visiale">
        <p>选择目录</p>
        <el-tree :data="folderData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        <div style="text-align: right; margin: 0">
          <el-button size="mini" type="text" @click="popover_visiale = false">取消</el-button>
          <el-button type="primary" size="mini" @click="moveFile">确定</el-button>
        </div>
        <el-button type="plain" slot="reference" size="small"><i class="el-icon-more el-icon--left">文件移动</i></el-button>
      </el-popover>
    </el-row>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item ><span @click="backHome">文件列表</span></el-breadcrumb-item>
      <el-breadcrumb-item>{{path_name}}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="demo-image">
      <div class="block" v-for="(image, index) in list"  :key="index">
        <div v-if="!image.is_dir">
           <div  @click="choose_image(index)" :class="image.isClick ? 'list-image clicked': 'list-image'">
            <el-image style="width: 100%;height: 5.25rem;" :src="image.url" fit="cover">
              <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
            </el-image>
            <span class="el-icon-check" v-if="image.isClick==1"></span>
            <span class="demonstration"> {{image.name}} </span>
            </div>
        </div>
        <div v-else>
          <div class="list-block" >
            <!-- <i style="width: auto;height: 5.25rem;" class="el-icon-folder" /> -->
            <el-image style="width: 100%;height: 5.25rem;" :src="folder" fit="cover" @dblclick="selectFolder(index)">
              <!-- <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div> -->
            </el-image>
            <span class="demonstration"><input  v-model="image.name" type="text" @blur="subFolder(index)" /></span>
          </div>
        </div>
      </div>

    </div>

    <pagination style="text-align: center;margin-top: 1.125rem;position: static;" hide-on-single-page v-show="total>0" 
    :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.size" @pagination="getList" />

    <el-row style="text-align: right;margin-top: 1.125rem;">
      <el-button size="medium" @click="Innervisible = false">取 消</el-button><el-button type="primary" @click="chooseImage" size="medium">确 认</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { fetchList,addFolder,folderList,moveFolder } from '@/api/goods/imageCenter'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import folder from '@/assets/folder.png';
  export default {
    name:'ImageCenter',
    components: { Pagination },
    model:{
      prop:"defalt_img",
      event:"change"
    },
    data() {
      return {
        pid:0, // 层级
        listQuery:{
          size:10,
          page:1,
          pid:0
        },
        select_folder_id: 0,
        popover_visiale:false,
        path_name:"",
        folder:folder,
        total:0,
        max_upload_limit:12,
        list:[],
        base_url: process.env.VUE_APP_IMAGE_API,
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        empaty_folder: {
          name:"新建文件夹",
          id:0,
          isClick:0, //选中状态
          is_dir:true // 文件夹
        },
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        folderData: [],
      }
    },
    props:{
      defalt_img:{
        type:Object|Array,
      },
      is_multiple:{
        required:false,
        type:Boolean,
        default:false
      },
      limit:{
        required:false,
        type:Number,
        default:1
      },
      Innervisible:{
        required:true,
        type:Boolean,
        default:false
      }
    },
    beforeMount() {
      this.getList()
    },
    watch:{
      Innervisible(newVal, oldVal)
      {
        if(newVal == false){
          this.$emit('closeImage')
        }
      },
      popover_visiale(newVal, oldVal)
      {
        if(newVal == true){
          this.getFolderData()
        }
      }
    },
    methods:{
      moveFile(){
        this.popover_visiale = false
        let select_row = this.list.filter(e=>{return e.isClick;})
        if(select_row.length == 0){
          this.$message("还没有选择要移动的图片")
          return false;
        }

        let ids = [];
        select_row.map(re=>{ids.push(re.id)}) 
        let _data = {
          image_ids:ids,
          pid:this.select_folder_id
        }
        moveFolder(_data).then(response =>{
          let re = response.data
          if(re == 'true' || re == true){
            this.getList()
          }
        })
      },
      getFolderData(){
        folderList(this.listQuery).then(response => {
          let re = response.data
          this.folderData = re
        })
      },
      handleNodeClick(data) {
        this.select_folder_id = data.id || 0
      },
      backHome:function(){
        this.pid = this.listQuery.pid = 0;
        this.getList();
        this.path_name = "";
      },
      selectFolder:function(index){
        this.pid = this.listQuery.pid = this.list[index].id
        this.getList();
        this.path_name = this.list[index].name
      },
      addFoler:function(){
        this.list.unshift(this.empaty_folder)
      },

      subFolder:function(index){
        if(this.list[index].name.length < 2){
          this.$alert("名字不能小于2位")
          return false;
        }
        addFolder({pid:this.pid,name:this.list[index].name,id:this.list[index].id}).then(response =>{
          if(this.list[index].id == 0){
            let re = response.data
            this.list[index].id = re.id
          }
          this.$msgbox("操作成功")
        })
      },
      getList:function(){
        fetchList(this.listQuery).then(response => {
          let re = response.data
          this.total = re.total
          this.list = [];
          if(re.data.dir_list.length){
            re.data.dir_list.map((item, index)=>{
              item.isClick = false;
              item.is_dir=true
              this.list.push(item)
            })
          }
          if(re.data.img_list.length){
            re.data.img_list.map((item, index)=>{
              item.isClick = false;
              item.is_dir=false
              this.list.push(item)
            })
          }

        })
      },
      choose_image:function(index){
        this.list[index].isClick = !this.list[index].isClick
        if(this.limit){
          let select_row = this.list.filter(e=>{return e.isClick;})
          if(select_row.length > this.limit){
            this.list[index].isClick = !this.list[index].isClick
            this.$message({message: '当前最多只能选择'+this.limit+'张图片', type: 'warning'});
          }
        }
      },
      handleExceed:function(files, fileList){
        //console.log('超出了数量限制')
        this.$message({message: '当前最多只能选择'+this.max_upload_limit+'张图片', type: 'warning'});
        return false
      },
      uploadSuccess:function(response, file, fileList){
       this.$message({message: '上传成功！', type: 'success'});
       this.getList()
      },
      chooseImage:function(){
        let select_row = this.list.filter(e=>{return e.isClick;})
        this.$emit('change', select_row)
        this.Innervisible=false
      }
    }
  }
</script>

<style>
  .list-image,.list-block{display: inline-block;padding: 0.5rem 0;margin-right: 0.725rem;float: left;width: 5.25rem;}
  .list-image{position: relative;}
  .el-image{background: #f3f3f3;border: 0.0625rem solid #FFFFFF;}
  .el-image:hover,.list-block i:hover{border: 0.0625rem solid #0000ff;}
  .demo-image{overflow: hidden;min-height: 25rem;}
  .demo-image .block{float: left; overflow: hidden;}
    .demo-image .block span{
        white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
        display: -webkit-box;
      }
  .list-block i{font-size: 5rem;color:#ceb5b5;background: #f3f3f3}
  .el-dialog-file .el-dialog__body{background: #FFFFFF;}
  .el-dialog-file .el-dialog{width: 50.9375rem;}
  .list-image .el-icon-check{width: 18px;
    height: 1rem;
    color: #fff;
    position: absolute;
    top: 4.75rem;
    right: 0;
    background-color: #5874d8;
    line-height: 1.375rem;
    font-size: 0.75rem;
    padding: 0 0.1875rem;
    border-top-left-radius: 100%}
    .list-image.clicked .el-image{border-color: #0000ff;}
    .upload-demo{display: inline-block;margin-right: 0.75rem;}
  .demonstration input{border: none;padding: 0;}
  .demonstration.blur input{border: 1px solid #5874d8;padding: 1px;}
</style>
